"use client"
import axios from 'axios'
import React,{useEffect,useState} from 'react'
import { useParams, useRouter } from 'next/navigation'
import { Card, Descriptions, Button ,Spin,message} from 'antd'
import moment from 'moment'
interface PaymentDaetail{
  date: string;//计划回款日期
  jine: string;//计划汇款金额
  num: string;//回款其次
  money: string;//已汇款金额
  title: string;//归属人
  dingdan: string;//订单标题
  Collect: number;//汇款状态
  id:number
}
export default function page() {
  const router = useRouter()
  const params=useParams()
  const {id}=params
  
  const [title, setTitle] = useState<Array<PaymentDaetail>>([])
  const [list,setlist]=useState<any>({})
  const  getTitle = async() =>{
    const res = await axios.get('http://localhost:3000/shoplist').then(res => res.data)
    setTitle(res)
    setlist(res.find((item:PaymentDaetail)=>item.id===Number(id)))
  }
  useEffect(() => {
    getTitle()
  },[])
  
  
//获取全部数据



  const formatCurrency=(amount:number|null)=>{
    if(amount===null) return '-'
    return `￥${amount.toFixed(2)}`
    
  }
  const formatDate=(dateString:string)=>{
    const date=new Date(dateString)
    return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
   
  }
  const formatDateTime=(dateTimeString:string)=>{
    const date=new Date(dateTimeString)
    return `${formatDate(dateTimeString)} ${date.getHours()}:${date.getMinutes().toString().padStart(2,'0')}`
  }

  
  return (
    <div className='p-4'>
      <Card 
      title="回款详情"
      extra={<Button type="primary" onClick={()=>router.back()}>返回</Button>}
      className='max-w-4xl mx-auto'
      >
        <Descriptions bordered column={2}>
          <Descriptions.Item label="计划回款日期">{moment(list.date).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
          <Descriptions.Item label="回款期次">{list.num}</Descriptions.Item>
          <Descriptions.Item label="计划汇款金额">{list.jine}</Descriptions.Item>
          <Descriptions.Item label="已汇款金额">{list.money}</Descriptions.Item>
          <Descriptions.Item label="逾期天数">{list.overdueDays||'-'}</Descriptions.Item>
          <Descriptions.Item label="逾期金额">{list.outstandingAmount}</Descriptions.Item>
          <Descriptions.Item label="归属人">{list.title}</Descriptions.Item>
          <Descriptions.Item label="订单标题">{list.dingdan}</Descriptions.Item>
          <Descriptions.Item label="汇款状态">{list.Collect==0?'已完成':list.Collect==1?'已逾期':"未完成"}</Descriptions.Item>
          <Descriptions.Item label="备注">{list.remarks||'-'}</Descriptions.Item>
        </Descriptions>
       
      </Card>
    </div>
  )
}
